<template>
    <div class="centermap">
<!--        <div class="maptitle">-->
<!--          <span class="title-background">-->
<!--              <div class="title-text">{{ maptitle }}</div>-->
<!--              <div class="title-text-mDate">{{ mDate }}</div>-->
<!--          </span>-->
<!--        </div>-->
        <div class="mapwrap">
            <div ref="myChart" id="myChart" class="gzMap"></div>
            <transition name="fade">
            <div v-if="dialogBool" class="MapDialog1">
                <div class="museum-div">
                    <span
                        class="museum-name"
                        v-for="(item, index) in museumName"
                        :key="index"
                        @click="openLinkInNewWindow(item)"
                    >
                        {{ item.name }}
                    </span>
                </div>
            </div>
            </transition>
<!--            <transition name="fade">-->
<!--            <div v-if="dialogBool"  class="MapDialog2">-->
<!--                <div class="museum-div">-->
<!--                    <span class="museum-name">-->
<!--                        国有博物馆-->
<!--                        <span style="margin-left: 5px;color: #edbe7e">{{ mapData.guoyou }}家</span>-->
<!--                    </span>-->
<!--                    <span class="museum-name">-->
<!--                        非国有博物馆-->
<!--                        <span style="margin-left: 5px;color: #edbe7e">{{ mapData.feiguoyou}}家</span>-->
<!--                    </span>-->
<!--                    <span class="museum-name">-->
<!--                        文物收藏单位-->
<!--                        <span style="margin-left: 5px;color: #edbe7e">{{ mapData.wenwu}}家</span>-->
<!--                    </span>-->
<!--                </div>-->
<!--            </div>-->
<!--            </transition>-->
        </div>
    </div>
</template>

<script>
import gzData from '@/assets/json/Jiangxi.json';
import _ from "lodash";
import {currentGET} from "api";

export default {
    name: 'gz-map',
    data() {
        return {
            loading: true,
            mapData: null,
            dialogBool: false,
            museumName: [],
            maptitle: "江西省文博场馆(共 194家)",
            mDate: "文物系统国有博物馆 137 其他行业国有博物馆 8 非国有博物馆 49",
            mTime: '',
            charts: '',
            index: -1,
            option: {
                graphic: [{
                    type: 'image',
                    id: 'logo',
                    left: 195,
                    top: -60,
                    // z: 10,
                    // bounding: 'raw',
                    style: {
                        image: require('../../assets/img/MapBackground.png'),
                        width: 520,
                        height: 690,
                        rotation: 45, // 设置旋转角度为 45 度
                    }
                }],
                series: [
                    {
                        name: '江西省数据',
                        type: 'map',
                        map: '江西', // 自定义扩展图表类型
                        // zoom: 0.65, // 缩放
                        showLegendSymbol: true,
                        label: { // 文字
                            show: true,
                            color: '#fff',
                            fontSize: 10
                        },
                        itemStyle: { // 地图样式
                            borderColor: 'rgba(147, 235, 248, 0)',
                            borderWidth: 1,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            shadowColor: 'rgba(128, 217, 248, 1)',
                            // shadowColor: 'rgba(255, 255, 255, 1)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10
                        },
                        emphasis: { // 鼠标移入动态的时候显示的默认样式
                            itemStyle: {
                                areaColor: '#ddfcfb',
                                // borderColor: '#404a59',
                                borderWidth: 1
                            },
                            label: { // 文字
                                show: true,
                                color: '#edbe7e',
                                fontSize: 18,
                                formatter: (param) => {
                                    // var res = "{xing|} " + "\n" + param.name + "\n" + "(83家)"
                                    var res = "{xing|} " + "\n" + param.name + "\n"
                                    return res;
                                },
                                rich: {
                                    xing: {
                                        lineHeight: 40,
                                        height: 50,
                                        width: 50,
                                        align: 'center',
                                        backgroundColor: {
                                            image: require('../../assets/img/MapLocationIcons.png'),
                                        },
                                    },
                                },
                            },

                        },
                        select: {
                            itemStyle: {
                                areaColor: '#ddfcfb',
                                // borderColor: '#404a59',
                                borderWidth: 1
                            },
                            label: { // 文字
                                show: true,
                                color: '#edbe7e',
                                fontSize: 18,
                                formatter: function (param) {
                                    console.log(param, "param");
                                    // var res = "{xing|} " + "\n" + param.name + "\n" + "(83家)"
                                    var res = "{xing|} " + "\n" + param.name + "\n"
                                    return res;
                                },
                                rich: {
                                    xing: {
                                        lineHeight: 40,
                                        height: 50,
                                        width: 50,
                                        align: 'center',
                                        backgroundColor: {
                                            image: require('../../assets/img/MapLocationIcons.png'),
                                        },
                                    },
                                },
                            },
                        },
                        // rotation: 45,
                        aspectScale: 1.15,
                        layoutCenter: ['49%', '52.5%'],
                        layoutSize: 495,
                        markPoint: {
                            symbol: 'none'
                        },
                        data: '',
                    },
                ],
            },
            // index和市对应的字典
            cityMap: {
                0: '南昌市',
                1: '景德镇市',
                2: '萍乡市',
                3: '九江市',
                4: '新余市',
                5: '鹰潭市',
                6: '赣州市',
                7: '吉安市',
                8: '宜春市',
                9: '抚州市',
                10: '上饶市',
            },
        };
    },

    components: {},
    watch: {
        index(val) {
            console.log(val, "indexval")
            console.log(this.cityMap[val], "this.cityMap[val]")
            if (this.cityMap[val]) {
                this.museumName = this.mapData.cityData.find((item) => {
                    return item.cityName === this.cityMap[val];
                }).museum;
                console.log(this.museumName, "this.museumName");

                this.dialogBool = true;
            }
        }
    },
    computed: {},
    mounted() {
        this.setMyEchart(); // 页面挂载完成后执行
    },
    created() {
        this.$echarts.registerMap('江西', gzData);
        // this.getJson();
        this.getData();
    },
    methods: {
        getData() {

            this.loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            currentGET("map", {}).then((res) => {
                if (res.success) {
                    this.mapData = res.data;
                    console.log(JSON.parse(JSON.stringify(this.mapData)), "this.mapData");
                }
                // else {
                //     this.pageflag = false;
                //     this.$Message({
                //         text: res.msg,
                //         type: "warning",
                //     });
                // }
            }).finally(()=>{
                setTimeout(() => {
                    this.loading.close();
                }, 2000);
            })
        },
        openLinkInNewWindow(item) {
            console.log(JSON.parse(JSON.stringify(item)), "openLinkInNewWindow");

            // 修改导航当前页面类型
            this.$store.commit('museumInformation/SET_CurrentPage', 2);

            this.$router.push({
                path: '/revolutionaryMemorial',
                query: {
                    id: item.id,
                    cityId: item.cityId,
                    name: item.name,
                }
            });

            // window.open(routePath, '_blank');
        },
        setMyEchart() {
            const myChart = this.$refs.myChart; // 通过ref获取到DOM节点
            if (myChart) {
                const thisChart = this.$echarts.init(myChart); // 利用原型调取Echarts的初始化方法
                this.charts = thisChart;
                // 延时30秒后执行 高亮轮播 函数
                setTimeout(() => {
                    this.mapActive();
                }, 30000);
                this.mouseEvents();
                const option = this.option; // {}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
                thisChart.setOption(option); // 将编写好的配置项挂载到Echarts上
                window.addEventListener('resize', function () {
                    thisChart.resize(); // 页面大小变化后Echa	rts也更改大小
                });
            }
        },
        mouseEvents() {

            // 鼠标划入
            // this.charts.on('mouseover', (params, api, context) => {
            //     // console.log(params,"params")
            //     // 停止定时器，清除之前的高亮
            //     // clearInterval(this.mTime);
            //
            //     let end = setInterval(function () { }, 100);
            //     for (let i = 1; i <= end; i++) {
            //         clearInterval(i);
            //     }
            //
            //
            //     this.mTime = '';
            //     console.log(this.mTime, "this.mTime");
            //     this.charts.dispatchAction({
            //         type: 'downplay',
            //         seriesIndex: 0,
            //         dataIndex: this.index
            //     });
            // });
            // 鼠标划出重新定时器开始
            this.charts.on('mouseout', _.debounce((params) => {
                // 停止定时器，清除之前的高亮
                clearInterval(this.mTime);
                // let end = setInterval(function () { }, 100);
                // for (let i = 1; i <= end; i++) {
                //     clearInterval(i);
                // }

                this.mTime = '';
                console.log(this.mTime, "this.mTime");
                this.charts.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: this.index
                });

                if (!params.name.trim()) {
                    setTimeout(() => {
                        this.mapActive();
                    }, 30000);
                }
            }));

            this.charts.on('click', _.debounce(params => {
                // 获取点击事件的相关信息
                console.log('数据项名称：', params.name);

                // 有数据名称就展示弹窗
                if (params.name.trim()) {

                    let targetCity = this.mapData.cityData.find(function(item) {
                        return item.cityName === params.name;
                    });

                    console.log(targetCity, "targetCity");

                    // 修改导航当前页面类型
                    this.$store.commit('museumInformation/SET_CurrentPage', 1);
                    // 跳转到市级页面
                    this.$router.push({
                        path: '/urbanArea',
                        query: {
                            name: params.name,
                            cityId: targetCity.cityId,
                        }
                    })

                    // this.mapName.push(params.name);
                    //
                    // this.museumName = this.mapData.cityData.find(function (item) {
                    //     return item.cityName === params.name;
                    // }).museum;
                    // console.log(this.museumName, "this.museumName");
                    //
                    // this.dialogBool = true;
                }else {
                    // this.charts.off ("click")
                    // this.charts.off ("mouseover")
                    // this.charts.clear();
                    // this.$echarts.registerMap('江西', gzData);
                    // this.setMyEchart();
                    // this.mapName = [];
                    this.dialogBool = false;
                }


                // 停止定时器，清除之前的高亮
                clearInterval(this.mTime);
                let end = setInterval(function () { }, 100);
                for (let i = 1; i <= end; i++) {
                    clearInterval(i);
                }

                this.mTime = '';
                console.log(this.mTime, "this.mTime");
                this.charts.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: this.index
                });

                // 数据名称与上一次一样就隐藏弹窗，不一样就把上一次的数据删掉
                // if (this.mapName.length === 2) {
                //     if (this.mapName[0] === this.mapName[1]) {
                //         this.mapName = [];
                //         this.dialogBool = false;
                //     }else {
                //         this.mapName.shift();
                //     }
                // }
                console.log(this.mapName, "this.mapName");
            }, 300));

            // 鼠标从地图滑过
            this.charts.on('mouseover', _.debounce(params => {
                // 获取点击事件的相关信息
                console.log('数据项名称：', params.name);



                // 有数据名称就展示弹窗
                if (params.name.trim()) {

                    // 停止定时器，清除之前的高亮
                    clearInterval(this.mTime);
                    let end = setInterval(function () { }, 100);
                    for (let i = 1; i <= end; i++) {
                        clearInterval(i);
                    }

                    this.mTime = '';
                    console.log(this.mTime, "this.mTime");
                    this.charts.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: this.index
                    });

                    // this.mapName.push(params.name);

                    this.museumName = this.mapData.cityData.find(function (item) {
                        return item.cityName === params.name;
                    }).museum;
                    console.log(this.museumName, "this.museumName");

                    this.dialogBool = true;
                }else {
                    // this.charts.off ("click")
                    // this.charts.clear();
                    // this.$echarts.registerMap('江西', gzData);
                    // this.setMyEchart();
                    // this.mapName = [];
                    // this.dialogBool = false;
                }
            }, 300));

        },

        // 高亮轮播
        mapActive () {
            const dataLength = gzData.features.length;
        // 用定时器控制高亮
        this.mTime = setInterval(() => {
            // 清除之前的高亮
            this.charts.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: this.index
            });
            this.index++;
            // 当前下标高亮
            this.charts.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: this.index
            });
            // this.charts.dispatchAction({
            //     type: 'showTip',
            //     seriesIndex: 0,
            //     dataIndex: this.index
            // });
            if (this.index >= dataLength) {
                this.index = -1;
                // clearInterval(this.mTime);
                // this.mapActive();
            }
        }, 2000);
        },
        getJson () {
            this.option.series[0].data = gzData.features.map((item) => { // 显示窗口的数据转换
                return {
                    value: (Math.random() * 1000).toFixed(2),
                    name: item.properties.name
                };
            });
        }
    }
};

</script>
<style lang="scss" scoped>
.gzMap {
  width: 100%;
  height: 100%
}

.centermap {
  //margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 35px;
    padding-bottom: 65px;
    box-sizing: border-box;

    .title-background {
      width: 362px;
      height: 36px;
      position: relative;
      //font-weight: 900;
      //letter-spacing: 6px;
      //background: linear-gradient(
      //  92deg,
      //  #0072ff 0%,
      //  #00eaff 48.8525390625%,
      //  #01aaff 100%
      //);
      //-webkit-background-clip: text;
      //-webkit-text-fill-color: transparent;
      background-image: url("../../assets/img/MapTitleIcon.png");
      background-size: cover;

      .title-text {
        position: relative;
        top: 5px;
        left: 50px;
        font-size: 17px;
        letter-spacing: 2px;
        color: #d9fcfb;
      }

      .title-text-mDate {
        position: relative;
        top: 23px;
        left: 25px;
        font-size: 12px;
        //letter-spacing: 2px;
        color: #d9fcfb;
      }
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      //background: url("../../assets/img/xiezuo.png") no-repeat;
    }

    .you {
      //background: url("../../assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    height: 548px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    //.quanguo {
    //  position: absolute;
    //  right: 20px;
    //  top: -46px;
    //  width: 80px;
    //  height: 28px;
    //  border: 1px solid #00eded;
    //  border-radius: 10px;
    //  color: #00f7f6;
    //  text-align: center;
    //  line-height: 26px;
    //  letter-spacing: 6px;
    //  cursor: pointer;
    //  box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
    //  0 0 6px rgba(0, 237, 237, 0.4);
    //}

    //.gzMap{
    //  position:absolute;
    //}

    .MapDialog1 {
      position: absolute;
      top: 220px;
      right: 80px;
      width: 158px;
      height: 328px;
      background: url("../../assets/img/MapDialog1.png");
      background-size: cover;
      padding-top: 15px;
      box-sizing: border-box;

      .museum-div {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 300px;
        padding-top: 5px;
        padding-bottom: 27px;
        box-sizing: border-box;
        overflow: auto;

        .museum-name {
          margin-top: 8px;
          padding-bottom: 5px;
          width: 130px;
          //height: 19px;
          font-size: 12px;
          line-height: 1.5;
          color: #c8e4fa;
          text-align: center;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);

            &:hover {
                cursor: pointer;
                text-shadow: 0 0 10px #FFF;
                //background: linear-gradient(to bottom, #091c39, #3c526d);
                transform: scale(1.01);
            }

            &.selected {
                text-shadow: 0 0 10px #FFF;
                //background: linear-gradient(to bottom, #8aafd4, #13355f);
                transform: scale(1.1);
            }
        }

        .museum-name:last-child {
          border-bottom: none;
        }
      }

    }

    .MapDialog2 {
      position: absolute;
      top: 418px;
      right: 80px;
      width: 158px;
      height: 114px;
      background: url("../../assets/img/MapDialog2.png");
      background-size: cover;

      .museum-div {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 10px;
        //padding-bottom: 27px;
        box-sizing: border-box;
        overflow: auto;

        .museum-name {
          margin-top: 8px;
          padding-bottom: 5px;
          width: 130px;
          height: 19px;
          font-size: 12px;
          color: #c8e4fa;
          text-align: center;
          //border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
      }
    }
  }
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background: #ffffff4d;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  background: #666;
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(220, 213, 213, 0.4);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
